<template>
  <div class="login_bg">
    <div class="login_adv" style="background-image: url('https://download.sanzhiyun.cn/web5/img/l3.jpg');" >
      <div class="login_adv__title">
        <h3>三智云V<span style="font-size: 11px;">5</span></h3>
      </div>
      <div class="login_adv__mask"></div>
      <div class="login_adv__bottom">
           <span @click="toUrl">
          蜀ICP备2024091136号-1
        </span>
      </div>
    </div>
    <div class="login_main">
      <div class="login-form">
        <div class="login-header">
          <div class="logo">
            <span style="font-weight: bolder;font-size: 20px;color: #656D78;" >三智云</span>
            <span style="padding-top: 6px;margin-left: 5px;color: #1e9fff;font-weight: bolder;">V</span>
            <span style="padding-top: 10px;font-size: 11px;color: #1e9fff;font-weight: bold;">5</span>
          </div>
        </div>
        <div style="margin-bottom: 30px;font-size: large;font-weight: bold;color: #8a8f97;">
          用户登录
        </div>
        <div>
          <div style="width: 350px;">
            <x-form v-model="model" v-model:api="fApi" :rules="state.rule" />
            <div style="margin-top: 30px;width: 100%;">
              <JButton   @click="submitForm" type="info" size="medium" style="width: 100%">登 录</JButton >
            </div>
          </div>
          <div style="margin-bottom:10px;text-align: center;display: flex;margin-top: 10px;">
            <div style="flex:1;">
              <tiny-image style="width: 80px; height: 80px" :src="state.url" />
              <div>
                安卓APP下载
              </div>
            </div>
            <div style="flex:1;">
              <tiny-image style="width: 80px; height: 80px" :src="state.url1" />
              <div>
                微信小程序
              </div>
            </div>
          </div>
        </div>
        <div class="down" @click="todown">
          点击下载windows桌面版
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import tool from '@/utils/tool.js'
import Cookies from "js-cookie";
import {initBackEndControlRoutes} from "@/router/backEnd";
import {ref, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router'
const route = useRoute()
const router = useRouter()
const model = ref({
  username: '',
  userpwd: '',
})
const fApi = ref({})
const state = ref({
  url: 'https://download.sanzhiyun.cn/app/pic/dbar.png',
  url1: 'https://download.sanzhiyun.cn/app/pic/xcx.jpg',
  src: '',
  autoLogin: true,
  rule: [
    {
      com: 'JInput',
      field: 'username',
      title: '用户名',
      required: true ,
      inject: true,
      size: 'large',
      events: {
        enter: (inject) => {
          if (inject.getValue('username')) {
            inject.exec('userpwd', 'focus')
          } else {
            tool.err('用户名不能为空')
          }
        },
      }
    },
    {
      com: 'JInput',
      field: 'userpwd',
      title: '密码',
      required: true ,
      showPassword: true,
      size: 'large',
      inject: true,
      events: {
        enter: (inject, e) => {
          if (inject.getValue('username') && inject.getValue('userpwd')) {
            submitForm()
          } else {
            tool.err('用户名密码不能为空')
          }
        }
      }
    }
  ],
})
watch(() => state.value.autoLogin, (newVal) => {
  tool.data.set('autoLogin', newVal)
})
const todown = () => {
  window.open('https://download.sanzhiyun.cn/szdesk.zip')
}
const submitForm = () => {
  if(fApi.value.valid()) {
    let obj = {
      username: model.value.username,
      userpwd: tool.crypto.MD5(model.value.userpwd)
    }
    
   tool.post('user/login', obj).then((ret) => {
     if (ret.stat) {
       let info = ret.data
       tool.data.setUser(info)
       // 存储 token 到浏览器缓存
       tool.Session.set('token', info.token);
       // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/store/userInfo.ts` 中不同用户登录判断（模拟数据）
       Cookies.set('username', info.username);
       onSignIn()
     }
   })
  }
}
const onSignIn = async () => {
  // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
  // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
  const isNoPower = await initBackEndControlRoutes();
  // 执行完 initBackEndControlRoutes，再执行 signInSuccess
  signInSuccess(isNoPower);
}
// 登录成功后的跳转
const signInSuccess = (isNoPower) => {
  if (isNoPower) {
    tool.err('抱歉，您没有登录权限');
    tool.Session.clear();
  } else {
    router.push('/');
    // 登录成功提示
    const signInText = '欢迎回来！';
    tool.suc(signInText)
    // 添加 loading，防止第一次进入界面时出现短暂空白
  }
}
const toUrl = () => {
  window.open('http://beian.miit.gov.cn/')
}
</script>

<style scoped lang="scss">
.login_bg {
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
}

.down {
  margin-top: 20px;
  font-size: medium;
  font-weight: bold;
  color: #515A6E;

  &:hover {
    cursor: pointer;
    color: #1e9fff;
  }
}

.login_adv {
  width: 33.33333%;
  background-size: cover;
  background: #555 no-repeat center center;
  position: relative;

  .login_adv__title {
    color: #fff;
    padding: 40px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }

  .login_adv__title h2 {
    font-size: 40px;
  }

  .login_adv__title h4 {
    font-size: 18px;
    margin-top: 10px;
    font-weight: normal;
  }

  .login_adv__title p {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
  }

  .login_adv__title div {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }

  .login_adv__title div span {
    margin-right: 15px;
  }

  .login_adv__title div i {
    font-size: 40px;
  }

  .login_adv__title div i.add {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
  }

  .login_adv__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    padding: 40px;
    background-image: linear-gradient(transparent, #000);
    z-index: 3;
    font-size: 13px;

    &:hover {
      cursor: pointer;
      color: #3BAADC;
    }
  }

  .login_adv__mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
}

.title {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  text-align: center;
  color: #515a6e;
}

.login_main {
  flex: 1;
  overflow: auto;
  display: flex;
  .login-form {
    padding: 25px 50px;
    margin: auto;
    box-shadow: 2px 2px 5px 0 #aaaaaa;
    border-radius: 2px;
    text-align: center;

    .login-header {
      margin-bottom: 30px;
    }

    .login-header .logo {
      display: flex;
      align-items: center;
    }

    .login-header .logo img {
      width: 40px;
      height: 40px;
      vertical-align: bottom;
      margin-right: 10px;
    }

    .login-header .logo label {
      font-size: 18px;
      color: #777777;
    }
  }
}


</style>
